<template>
	<view class="box1">
		<!-- <view class="btns">
			<view class="btn" @click="changetype(index)" :class="commontypeid==index?'act':'btn'" v-for="(i,index) in commontype">{{i}}</view>
		</view> -->
		<scroll-view scroll-y="true" class="main" @scrolltolower="more">
			<view class="box2" v-for="item in comment">
				<view class="line1">
					<text>匿名用户</text>
					<view class="stars">
						<image v-for="i in item.star" src="../../static/pages_technician/starA.png" mode=""></image>
						<image v-for="i in (5 - item.star)" src="../../static/pages_technician/star.png" mode=""></image>
					</view>
				</view>
				<view class="line2">{{item.createtime | date}}</view>
				<view class="line3">{{item.content}}</view>
				<view class="line4">
					<view class="btn"  v-for="(val) of item.label_content">{{val}}</view>
				</view>
			</view>
			<u-empty mode="list" v-if="finish && comment.length === 0" style="margin-top: 300rpx;" icon="/static/none.png">
					</u-empty>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				page: 1,
				finish: false,
				comment: [],
				id: '',
				location: '',
				commontypeid: 0,
				commontype: ['全部评价', '技师专业', '服务到位', '体验很棒', '手法专业', '按时到达', '性价比高', '礼貌热情'],
				shop:''
			}

		},
		onLoad(option) {
			this.id = option.id
			this.shop = option.shop
			if(this.shop==1){
				this.getList1()
			}else{
				this.getList()
			}
		},
		methods: {
			more(){
				this.page++
				this.getList()
			},
			...mapActions(['getLocation']),
			async getList() {
				if (!this.$store.state.location) {
					await this.getLocation()
				}
				this.location = JSON.parse(JSON.stringify(this.$store.state.location))
				if (this.finish) {
					return
				}
				this.$api.post('/skillinfo', {
					...this.location,
					page: this.page,
					id: this.id,
				}).then(res => {
					res.data.comment.forEach(item => {
						item.label_content = item.label_content ? item.label_content.split(',') : []
					})

					this.comment = this.comment.concat(res.data.comment)

					if (res.data.comment.length === 0) {
						this.finish = true
					}

				})
			},
			async getList1() {
				if (!this.$store.state.location) {
					await this.getLocation()
				}
				this.location = JSON.parse(JSON.stringify(this.$store.state.location))
				if (this.finish) {
					return
				}
				this.$api.post('/userstorecomment', {
					...this.location,
					page: this.page,
					store_id: this.id,
				}).then(res => {
					res.data.forEach(item => {
						item.label_content = item.label_content ? item.label_content.split(',') : []
					})
			
					this.comment = this.comment.concat(res.data)
			
					if (res.data.length === 0) {
						this.finish = true
					}
			
				})
			},
			changetype(index) {
				this.commontypeid = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f7f7fa;
		padding-bottom: 30rpx;
	}

	.box1 {
		background: #fff;
		border-radius: 20rpx;
		padding: 32rpx;
		box-sizing: border-box;
		height: 100vh;
		box-sizing: border-box;
		.main{
			height: 100%;
			overflow: hidden;
		}
		

		.btns {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.btn {
				width: 129rpx;
				height: 54rpx;
				background: #f6f7fb;
				border-radius: 20rpx;
				font-size: 24rpx;
				color: #727891;
				line-height: 54rpx;
				text-align: center;
				margin-top: 20rpx;
			}

			.act {
				background: #fe6051;
				color: #ffffff;
			}
		}

		.box2 {
			margin-bottom: 40rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #EBEBEB;

			.line1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				font-weight: 600;
				color: #1c274c;

				.stars {
					display: flex;
					align-items: center;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 10rpx;
					}
				}
			}

			.line2 {
				font-size: 20rpx;
				color: #babdc9;
				margin: 10rpx 0 15rpx;
			}

			.line3 {
				font-size: 26rpx;
				color: #1c274c;
				margin-bottom: 22rpx;
			}

			.line4 {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.btn {
					margin-top: 20rpx;
					width: 129rpx;
					height: 54rpx;
					background: #f6f7fb;
					border-radius: 20rpx;
					font-size: 24rpx;
					color: #727891;
					line-height: 54rpx;
					text-align: center;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>